<template>
	<view class="box">
		<view class="" v-for="(item,index) in lists" :key="index">
			<view class="second">
				<view class="tops">
					<view class="">
						<image :src="item.goods_image" mode="widthFix" style="width: 158rpx;"></image>
					</view>
					<view class="">
						<view class="del">
							{{item.goods_name}}
						</view>

						<view class="d_f a_i_c  " style="margin-top: 24rpx;margin-left: 25rpx;">
							<view class="" style="color: #808080;font-size: 20rpx;">
								状态 ：{{item.status}}
							</view>
							<view class="" style="color: #000000;font-size: 24rpx;font-weight: 800;margin-left: 99rpx;">
								实付款：￥{{item.pay_money}}
							</view>
						</view>

					</view>


				</view>

			</view>
			<view class="">



				<view class="" v-if="item.check==true">
					<view class="th">
						<view class="d_f a_i_c " style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								收货信息
							</view>
							<view class="" style="margin-left: 95rpx;">
								{{item.address}}
							</view>
						</view>
					</view>
					<view class="th" v-if="item.orderId!=''">
						<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								订单编号
							</view>
							<view class="d_f a_i_c" style="margin-left: 95rpx;">
								{{item.orderId}}
								<view class="copy" @click="copy(item.orderId)">复制</view>
							</view>
						</view>
					</view>
					<view class="th" v-if="item.postNo!=''">
						<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								物流单号
							</view>
							<view class="d_f a_i_c" style="margin-left: 95rpx;">
								{{item.postNo}}
								<view class="copy" @click="copy(item.postNo)">复制</view>
							</view>
						</view>
					</view>
					<view class="th">
						<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								付款时间
							</view>
							<view class="d_f a_i_c" style="margin-left: 95rpx;">
								{{item.paytime}}
							</view>
						</view>
					</view>
					<view class="th">
						<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								发货时间
							</view>
							<view class="d_f a_i_c" style="margin-left: 95rpx;">
								{{item.fhtime}}
							</view>
						</view>
					</view>
					<view class="th">
						<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
							<view class="" style="width: 132rpx;">
								付款金额
							</view>
							<view class="d_f a_i_c" style="margin-left: 95rpx;">
								￥{{item.pay_money}}
							</view>
						</view>
					</view>
				</view>
				<view class="th" v-if="item.check==true">
					<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
						<view class="" style="color: #666666;font-size: 24rpx;" @click="open(item,index)">
							收起更多订单信息
							<image src="../../static/close.png" mode="widthFix"
								style="width: 28rpx;margin-left: 11rpx;"></image>
							<view class="" style="height: 30rpx;">

							</view>
						</view>

					</view>
				</view>
				<view class="th" v-if="item.check==false">
					<view class="d_f a_i_c j_c_s_b" style="font-size: 24rpx;">
						<view class="" style="color: #666666;font-size: 24rpx;" @click="open(item,index)">
							查看更多订单信息
							<image src="../../static/open.png" mode="widthFix" style="width: 28rpx;margin-left: 11rpx;">
							</image>
							<view class="" style="height: 30rpx;">

							</view>
						</view>

					</view>
				</view>
			</view>


		</view>


	</view>
</template>

<script>
	import {
		getOrderList,
		wxLogin
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	export default {
		data() {
			return {
				lists: [],

				local: '',
				name: "",
				
				obj:{
					0:'未付款',
					1:'待发货',
					2:'已发货',
					3:'退款中',
					4:'已退款',
					5:'已完成',
				}

			}
		},
		components: {

		},
		methods: {
		
			open(item,index) {
				
				this.lists[index].check=!item.check


			},
			getdata(){
				getOrderList({
					openid: uni.getStorageSync('openidH5'),
					status: 'all',
					page: 1
				}).then((res) => {
					console.log(res)
					this.lists = res.data
					for (var i in this.lists) {
						if (this.lists[i].status == 0) {
							
							this.lists[i].paytime = '无'
							this.lists[i].fhtime = '无'
						} else if(this.lists[i].status == 1){
							this.lists[i].fhtime = '无'
						}else {
							this.lists[i].fhtime = moment(this.lists[i].fhtime * 1000).format("YYYY-MM-DD")
							this.lists[i].paytime = moment(this.lists[i].paytime * 1000).format("YYYY-MM-DD")
						}
						for(var j in this.obj){
							if(this.lists[i].status==j){
								this.lists[i].status=this.obj[j]
							}
						}
					}
				this.lists.map((item,index)=>{
					this.$set(item,'check',false)
					if(index==0){
						item.check=true
					}
				})
				})
			},
			copy(item) {

				uni.setClipboardData({
					data: item,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
						// this.codeshow=true
					}
				});
			},
		},
		onLoad() {
if(!uni.getStorageSync('openidH5')){
				uni.login({
					provider: 'weixin', //使用微信登录
					success:(loginRes)=> {
						console.log(loginRes.code);
							
						wxLogin({
							code:loginRes.code,
							type:3,
							proid:0
						}).then((res)=>{
							console.log(res)
							uni.setStorageSync('openidH5', res.data.openidH5)
							this.getdata()
						})
				
					}
				});}else{
					this.getdata()
				}
			
		
			// if (uni.getStorageSync('local')) {
			// 	this.local = uni.getStorageSync('local')
			// }
			// if (uni.getStorageSync('name')) {
			// 	this.name = uni.getStorageSync('name')
			// }



		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.tops {
		display: flex;
		background-color: #FFFFFF;
		width: 630rpx;
		margin-left: 24rpx;
		padding-left: 11rpx;
		padding-top: 11rpx;
		margin-top: 26rpx;

	}

	.copy {
		width: 90rpx;
		height: 40rpx;
		background: #F7F8FC;
		border: 1px solid #ABABAB;
		font-size: 18rpx;
		line-height: 35rpx;
		text-align: center;
		margin-left: 11rpx;
	}

	.th {
		width: 678rpx;

		background: #F7F8FC;

		margin-left: 36rpx;

		padding: 36rpx 24rpx 0 24rpx;

	}


	.top {

		width: 678rpx;
		height: 215rpx;
		background: #F7F8FC;
		border-radius: 18rpx;
		margin-left: 36rpx;
		padding: 39rpx 32rpx 36rpx 32rpx;

	}

	.box {
		background-color: white;
		position: relative;
		min-height: 100vh;

	}

	.line {
		width: 541rpx;
		height: 1rpx;
		background: #E6E6E6;
		margin-top: 24rpx;
	}

	.second {
		width: 678rpx;

		background: #F7F8FC;
		border-radius: 18rpx 18rpx 0 0;
		margin-left: 36rpx;
		margin-top: 24rpx;

		display: flex;
	}

	.del {
		width: 409rpx;
		height: 63rpx;


		font-size: 24rpx;
		color: #000000;
		line-height: 36rpx;
		margin-left: 25rpx;
	}

	.guige {
		margin-left: 25rpx;

		height: 21rpx;

		font-size: 22rpx;
		color: #808080;
		line-height: 36rpx;
		margin-top: 21rpx;

	}

	.proces {
		margin-top: 10rpx;
		text-align: right;
		font-size: 24rpx;
		color: #1E1E1E
	}

	.sj {


		font-weight: 800;
		font-size: 30rpx;
		color: #000000;
		text-align: right;
	}

	.linsex {
		width: 339rpx;
		height: 1rpx;
		margin-left: 60rpx;
		margin-top: 12rpx;
		background: #E6E6E6;
	}

	.third {
		width: 678rpx;
		height: 225rpx;
		background: #F7F8FC;
		border-radius: 18rpx;
		margin-left: 36rpx;
		margin-top: 24rpx;
		padding: 36rpx 24rpx;
	}

	.tline {
		width: 630rpx;
		height: 1rpx;
		background: #E6E6E6;
		margin-top: 23rpx;
	}
</style>